import * as echarts from 'echarts'
import { rpxToPx } from '@/utils/share'

interface Params {
    realTotal: number[]
    qualifiedTotal: number[]
    month: string[]
}

export const getOptions = (params: Params) => {
    const options: echarts.EChartsCoreOption = {
        tooltip: {
            trigger: 'axis',
        },

        barWidth: rpxToPx(24),

        /** 图例 */
        legend: {
            icon: 'roundRect',
            right: '0%',
            itemWidth: rpxToPx(24),
            itemHeight: rpxToPx(24),
            data: ['培训人数', '合格人数'],
            itemGap: rpxToPx(40),
            textStyle: {
                color: '#666666', //字体颜色
                fontSize: rpxToPx(26), //字体大小
            },
        },

        /** 网格 */
        grid: {
            right: '0%',
            left: '7%',
            bottom: '10%',
            top: '20%',
        },

        /** 缩放 */
        dataZoom: [
            {
                type: 'slider',
                realtime: false,
                start: 0,
                end: 40, // 初始展示40%
                height: rpxToPx(8), //组件高度
                left: rpxToPx(40),
                bottom: rpxToPx(50), //下边的距离
                fillerColor: '#d9d9d9', // 滚动条颜色
                borderColor: '#ddd',
                handleSize: 0, // 两边手柄尺寸
                showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                // top: "96%",
                moveHandleSize: 0,
                backgroundColor: '#f5f5f5',
            },
            {
                type: 'inside', // 支持内部鼠标滚动平移
                start: 0,
                end: 40,
                zoomOnMouseWheel: false, // 关闭滚轮缩放
                moveOnMouseWheel: true, // 开启滚轮平移
                moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
            },
        ],

        /** 直角坐标系 grid 中的 x 轴 */
        xAxis: [
            {
                type: 'category',

                data: params.month,
                /** 坐标轴轴线相关设置。 */
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#e5e5e5', //左边线的颜色
                    },
                },

                /**  坐标轴刻度标签的相关设。*/
                axisLabel: {
                    fontSize: rpxToPx(24),
                    textStyle: {
                        color: '#999', //坐标值得具体的颜色
                    },
                },
            },
        ],

        /** 直角坐标系 grid 中的 y 轴 */
        yAxis: [
            {
                fontSize: rpxToPx(24),
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#999999',
                    },
                },
            },
        ],

        /** 数据 */
        series: [
            {
                name: '培训人数',
                type: 'bar',
                data: params.realTotal,
                itemStyle: {
                    barBorderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#21C1B1',
                        },
                        {
                            offset: 1,
                            color: '#3FE0D6',
                        },
                    ]),
                },
            },
            {
                name: '合格人数',
                type: 'bar',
                data: params.qualifiedTotal,
                itemStyle: {
                    barBorderRadius: [4, 4, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#FF943E',
                        },
                        {
                            offset: 1,
                            color: '#FFBD60',
                        },
                    ]),
                },
            },
        ],
    }

    return options
}
